<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>
		<script type="text/javascript" charset="utf-8">
		
			function UpdataStreamAppList(AppJson) {
				var ListParent = document.getElementById("plist");

				for (var index = 0; index < AppJson.length; index++) {
					var ExistItem = document.getElementById(AppJson[index].id);
					if (ExistItem != null && ExistItem != undefined) {

						ChangeInstallStateByAppid(AppJson[index].id, AppJson[index].InstallState);
						SetAppIcon(AppJson[index].id, AppJson[index].icon);
						SetAppSummary(AppJson[index].id, AppJson[index].summary);
						SetAppTitle(AppJson[index].id, AppJson[index].name);

					} else {
						var addAppIdem = NewAppItem(AppJson[index]);
						ListParent.appendChild(addAppIdem);
					}
				}
			}

			function NewAppItem(AppItem) {
				var ListParent = document.getElementById("plist");
				var innHtml1 = "<div class=\"columcount\"><div style=\"display: inline-block;width:"
				var innHtml2 = "px\"><div style=\"display: inline-block;float: left;width:80px;\"><img src=\"";
				var innHtml3 = "\" width=\"60px\" id=\"";
				var innHtml4 = "\"/></div><div "
				var innHtml5 = "><p class=\"title\" id=\""
				var innHtml6 = "\">";
				var innHtml7 = "</p><div class=\"summary\" id=\""
				var innHtml8 = "\">";
				var innHtml9 = "</div></div></div><div class=\"right\"><div class=\"rightpart\" style=\"\"><div style=\"margin-top: 8px;margin-bottom: 5px;\"><img style=\"width:25px;\" src=\"";
				var innHtml10 = "\" id=\""
				var innHtml11 = "\"/></div><div id=\""
				var innHtml12 = "\" style=\"font-size: 12px; color:gray\">";
				var innHtml13 = "</div></div></div></div>";


				var installIcon, InstallString, appIcon;
				AppItem.icon == null || AppItem.icon == undefined? appIcon = "HBuilder.png" : appIcon = AppItem.icon;
				AppItem.InstallState ? installIcon = "installed.png" : installIcon = "downlaod.png";
				AppItem.InstallState ? InstallString = "打开" : InstallString = "加载";
				var ColumItem = document.createElement("li");
				ColumItem.class = "columcount";
				ColumItem.id = AppItem.id;
				var divleftwidth = (document.body.clientWidth - 80);
				var divText = (document.body.clientWidth - 80 - 80);

				ColumItem.innerHTML = innHtml1 + divleftwidth + innHtml2 + appIcon + innHtml3 + AppItem.id + "icon" + innHtml4 + divleftwidth + innHtml5 + AppItem.id + "title" + innHtml6 + AppItem.name + innHtml7 + AppItem.id + "summary" + innHtml8 + AppItem.summary + innHtml9 + installIcon + innHtml10 + AppItem.id + "stateicon" + innHtml11 + AppItem.id + "InstallText" + innHtml12 + InstallString + innHtml13;
				ColumItem.onclick = function() {
					RunAppByid(this.id);
				};
				return ColumItem;
			}

			function AddItems() {
				var rootli = document.createElement("li");
				var ColumentDiv = document.createElement("div");
			}


			function RunAppByid(appid) {
				AppStream.StartAppByID(appid);
			}

			function ChangeInstallStateByAppid(appid, stare) {
				var appid11 = appid + "stateicon";
				var appidText = appid + "InstallText";
				var installIcon;
				var installText;
				stare ? installIcon = "installed.png" : installIcon = "downlaod.png";
				stare ? installText = "打开" : installText = "加载";
				document.getElementById(appid11).src = installIcon;
				document.getElementById(appidText).innerHTML = installText;
			}

			function SetAppIcon(appid, iconPath) {
				var appid11 = appid + "icon";
				if(iconPath == null || iconPath == "null" || iconPath == undefined )
					{ iconPath = "HBuilder.png";}
				document.getElementById(appid11).src = iconPath;
			}

			function SetAppSummary(appid, summary) {
				var appid11 = appid + "summary";
				document.getElementById(appid11).textContent = summary;
			}

			function SetAppTitle(appid, title) {
				var appid11 = appid + "title";
				document.getElementById(appid11).textContent = title;
			}

			function testJson() {
				InitAppList(test);
			}
		</script>
		<style type="text/css">
			li {} li:active {
				background: #f4f4f4;
			}
			.iabout {
				background: no-repeat center center url();
				background-size: 50px 44px;
			}
			.item {
				display: block;
				background: no-repeat right center url();
				background-size: 12px 22px;
				-ms-touch-action: auto;
			}
			.chs {
				font-size: 0.8em;
				color: #838383;
			}
			body {
				padding: 0;
				margin: 0;
			}
			.columcount {
				-webkit-column-count: 2;
				margin-right: 1px;
				padding: 3px;
				display: -webkit-box;
				-webkit-box-shadow: inset 0px -1px 1px rgba(211, 211, 211, .5);
				box-shadow: inset 0px -1px 1px rgba(211, 211, 211, .5);
			}	
			.columcount .right {
				width: 70px;
			}
			p {
				margin: 0;
				font-size: 12px;
				color: gray;
				margin-bottom: 10px;
				margin-left: 25px;
				margin-top: 0.5em;
			}
			p.title {
				font-size: 16px;
				color: #000000;
				margin-bottom: 5px;
				margin-top: 3px;
				margin-left: 5px;
				font-weight: bold;
			}
			div.summary{
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				color:#8F8F94;
				font-size: 12px;
				height:29px; 
				margin-left:10px;
				margin-top: 8px;
			}
			.rightpart {
				float: right;
				margin-right: 20px;
				margin-top: 5px;
				box-shadow: inset 1px 0px 0px rgba(211, 211, 211, .5);
				padding-left: 15px;
			}
		</style>
	</head>
	<body onselectstart="return false;">
		<div id="content" class="content">
			<ul id="plist" style="list-style:none;margin:0;padding:0;text-align:left;">
				
			</ul>
		</div>
	</body>

</html>